<template>
  <div class="container">
    <!-- header -->
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="i fa fa-tachometer fa-lg">&nbsp;&nbsp;水质监测</i>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 显示数据 -->
    <div class="waterQualityData">
      <el-table
        v-loading="waterQualityLoading"
        :data="handleWaterQualityList"
        header-cell-classname="tanbleRow"
        cell-class-name="tableRow"
        highlight-current-row
      >
        <el-table-column align="center" type="index" label="序号" fixed></el-table-column>
        <el-table-column align="center" prop="address" label="设备编号" min-width="120"></el-table-column>
        <el-table-column align="center" prop="turbidity" label="浊度" min-width="80"></el-table-column>
        <el-table-column align="center" label="水质" min-width="120">
          <template slot-scope="scope">
            <el-tag type="success" effect="dark" v-if="scope.row.turbidity < 1">优</el-tag>
            <el-tag effect="dark" v-if="scope.row.turbidity >= 1 && scope.row.turbidity < 3">良</el-tag>
            <el-tag type="danger" effect="dark" v-if="scope.row.turbidity >= 3">差</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="读数时间" min-width="140">
          <template slot-scope="scope">
            <el-tag effect="plain">{{scope.row.dateline}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <el-pagination
      style="margin-top: 20px; text-align: center"
      @size-change="sChange"
      @current-change="pChange"
      :current-page="page"
      :page-sizes="[10, 15, 20, 25]"
      :page-size="rows"
      background
      layout=" total, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import {getWaterQualityData} from "../../api/api";
import moment from "moment";
export default {
  data() {
    return {
      page: 1, // 分页，页码
      rows: 15, // 分页，每页数据条数
      total: null,
      waterQualityLoading: false,
      waterQualityList: [],
    }
  },
  computed: {
    handleWaterQualityList() {
      if (this.waterQualityList.length === 0) return;
      this.waterQualityList.forEach(function(item) {
        item.dateline = moment(item.dateline).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      });
      return this.waterQualityList;
    }
  },
  methods: {
    GetWaterQualityList(page, rows) {
      let that = this;
      that.waterQualityLoading = true;
      this.isPagination = false;
      let msg = {
        enprNo: 'esss',
        page: page,
        rows: rows
      };
      getWaterQualityData(msg).then(res => {
          if (res.data.code === "200") {
          that.waterQualityList = res.data.data.content;
          that.total = res.data.data.totalElements ;
          that.waterQualityLoading = false;
        } else {
          that.Error("获取数据失败！");
          that.waterQualityLoading = false;
        }
      })
      .catch(error => {
        that.waterQualityLoading = false;
        // that.Error(error);
      });
    },
    getWaterQualityList() {
      let page = this.page;
      let rows = this.rows;
      this.GetWaterQualityList(page, rows);
    },

    // 分页
    pChange(val) {
      let rows = this.rows;
      this.GetWaterQualityList(val, rows);
    },
    sChange(val) {
      let page = this.page;
      this.GetWaterQualityList(page, val);
    },

    Error(str) {
      this.$alert(String(str), "提示", {
        confirmButtonText: "确定",
        type: "error"
      });
    }
  },

    mounted() {
      this.getWaterQualityList();
    }
  };
</script>

<style scoped>
.i {
  padding-top: 0.4em;
  float: left;
  font-size: 1.5em;
}
</style>